<template>
    <div class="ceshi">
        <el-drawer :close-on-click-modal="false" class="hm-drawer" v-model="show" size="70%" direction="rtl"
            :before-close="handleClose">
            <template #header>
                <div class="hm-box-title">修改商品</div>
            </template>

            <el-form ref="supplierAddProductsFormRef" :model="form" style="width: 100%" :inline="true" :rules="rules"
                label-width="100px" scroll-to-error>
                <div class="hm-form-item-box">
                    <div class="hm-form-title" style=" position: relative; ">基本信息</div>


                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="商品名称" prop="styleName">
                                <el-input disabled v-model="form.styleName" placeholder="请输入商品名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="类目" prop="category">
                                <el-cascader v-model="form.category" :props="categoryProps" clearable ref="categorysRef"
                                    style="width:100%" @change="handleHandleChange" placeholder="请选择类目" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品编码" prop="styleCode">
                                <el-input disabled v-model="form.styleCode" placeholder="请输入商品编码" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="商品价格" prop="price">
                                <el-input v-model="form.price" placeholder="请输入商品价格" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品牌" prop="brand">
                                <el-select disabled v-model="form.brand" placeholder="请选择品牌" clearable>
                                    <el-option v-for="dict in brandList" :key="dict.id" :label="dict.brandName"
                                        :value="dict.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="贸易方式" prop="tradeMode">
                                <el-select v-model="form.tradeMode" placeholder="请选择贸易方式" clearable>
                                    <el-option v-for="dict in hm_trade_type" :key="dict.value" :label="dict.label"
                                        :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="保质期" prop="shelfLife">
                                <el-input disabled v-model="form.shelfLife" placeholder="请输入保质期" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="上市时间" prop="listingDate">
                                <el-date-picker disabled clearable v-model="form.listingDate" type="date"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择上市时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产地" prop="origin">
                                <el-input disabled v-model="form.origin" placeholder="请输入产地" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8" style="display: flex;">
                            <el-form-item label="在售链接" prop="saleLink">
                                <el-input disabled v-model="form.saleLink" placeholder="请输入在售链接" clearable />
                            </el-form-item>
                        </el-col>

                        <el-col :span="16">
                            <el-form-item label="卖点" prop="sellingPoints">
                                <el-input v-model="form.sellingPoints" placeholder="请输入卖点" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <div>
                        <el-form-item label="商品图片" prop="productImage">
                            <image-upload disabled v-model="form.productImage" />
                        </el-form-item>
                    </div>
                    <div class="hm-form-title">合作信息</div>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="合作方式" prop="cooperationMode">
                                <el-select v-model="form.cooperationMode" placeholder="请选择合作方式" clearable>
                                    <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                                        :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="成本价" prop="costPrice">
                                <el-input v-model="form.costPrice" placeholder="请输入成本价" clearable />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="招商员" prop="recruiter">
                                <el-input disabled v-model="form.recruiter" placeholder="请输入招商员(调取供应商账号设置-对接人)"
                                    clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="店铺名称" prop="storeName">
                                <el-input disabled v-model="form.storeName" placeholder="请输入店铺名称" clearable />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="直播机制" prop="liveStreamingMechanism">
                                <el-input v-model="form.liveStreamingMechanism" placeholder="请输入直播机制" clearable />
                            </el-form-item>
                        </el-col>


                        <el-col :span="8">
                            <el-form-item label="材质/成分" prop="ingredient">
                                <el-input v-model="form.ingredient" placeholder="请输入材质/成分" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8" v-if="type == 'commodity'">
                            <el-form-item label="意向主播" prop="likePerson">
                                <el-select disabled v-model="form.likePerson" placeholder="请选择" clearable>
                                    <el-option v-for="dict in hm_anchor" :key="dict.value" :label="dict.label"
                                        :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="type == 'anchor'">
                            <el-form-item label="选品部门" prop="choosePerson">
                                <el-select disabled v-model="form.choosePerson" placeholder="请选择" clearable>
                                    <el-option v-for="dict in hm_anchor" :key="dict.value" :label="dict.label"
                                        :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="佣金" prop="commission">
                                <el-input v-model="form.commission" placeholder="请输入佣金" clearable />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="工厂名称" prop="factoryName">
                                <el-input disabled v-model="form.factoryName" placeholder="请输入工厂名称" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>



                    <el-row class="hm-row3" :gutter="60">
                        <el-col :span="8">
                            <el-form-item label="能否破价" prop="discountPrice">
                                <el-select disabled v-model="form.discountPrice" placeholder="请选择能否破价" clearable>
                                    <el-option v-for="dict in hm_discount" :key="dict.value" :label="dict.label"
                                        :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="type == 'anchor'">
                            <el-form-item label="选品意见" prop="chooseView">
                                <el-input disabled v-model="form.chooseView" placeholder="请输入选品意见" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="type == 'anchor'">
                            <el-form-item label="样品状态" prop="auditStatus">
                                <el-select disabled v-model="form.auditStatus" placeholder="请选择审核状态" clearable
                                    style="width: 220px">
                                    <el-option v-for="dict in auditStatusList" :key="dict.value" :label="dict.label"
                                        :value="dict.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup name="Commoditydetails" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { auditStatusNameById } from '@/utils/auditStatusFilter'
import { listBrand } from '@/api/system/brand';
import { BrandVO } from '@/api/system/brand/types';
import { SupplierAddProductsForm } from '@/api/system/supplierAddProducts/types';
import { validateSpaceAndEmoji } from '@/utils/validate'
import { getproductscategorychildlistbypid, updateSupplierAddProducts } from '@/api/system/supplierAddProducts';

const { hm_discount } = toRefs<any>(proxy?.useDict('hm_discount'));
const { hm_anchor } = toRefs<any>(proxy?.useDict('hm_anchor'));
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const brandList = ref<BrandVO[]>([]);
const buttonLoading = ref(false);
const categorysRef = ref();

const auditStatusList = reactive([
    { label: '待审核', value: '1' },
    { label: '未通过', value: '2' },
    { label: '审核通过', value: '3' },
    { label: '待寄样', value: '4' },
    { label: '无货', value: '5' },
    { label: '寄样中', value: '6' },
    { label: '已入库', value: '7' },
    { label: '补样邀约', value: '8' },
    { label: '破损补样邀约', value: '9' },
    { label: '招商部退还', value: '10' },
]);


const form = ref<SupplierAddProductsForm>({
    id: undefined,
    styleName: undefined,
    category: undefined,
    styleCode: undefined,
    price: undefined,
    brand: undefined,
    tradeMode: undefined,
    shelfLife: undefined,
    listingDate: undefined,
    origin: undefined,
    saleLink: undefined,
    sellingPoints: undefined,
    productImage: undefined,
    cooperationMode: undefined,
    costPrice: undefined,
    recruiter: undefined,
    storeName: undefined,
    liveStreamingMechanism: undefined,
    ingredient: undefined,
    likePerson: undefined,
    commission: undefined,
    factoryName: undefined,
    discountPrice: undefined,
    auditStatus: undefined,
    remark: undefined,
    supplierName: undefined,
})
const rules = ref(
    {
        styleName: [
            { required: true, message: '商品名称不能为空', trigger: 'blur' },
            { min: 2, max: 20, message: '商品名称长度必须介于 2 和 20 之间', trigger: 'blur' },
            { validator: validateSpaceAndEmoji, }
        ],
        category: [{ required: true, message: '请选择类目', trigger: 'change' }],
        styleCode: [{ required: true, message: '请输入商品编码', trigger: 'blur' }, { validator: validateSpaceAndEmoji, }],
        price: [
            { required: true, message: '请输入商品价格', trigger: 'blur' },
            { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的产品价格:整数或者保留两位小数' }
        ],
        brand: [{ required: true, message: '请选择品牌', trigger: 'change' }],
        sellingPoints: [{ required: true, message: '请输入卖点', trigger: 'blur' }],
        productImage: [{ required: true, message: '请上传商品图片', trigger: 'change' }],
        cooperationMode: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
        costPrice: [
            { required: true, message: '请输入成本价', trigger: 'blur' },
            { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的成本价:整数或者保留两位小数' }
        ],
        // recruiter: [{ required: true, message: '请输入招商员', trigger: 'blur' }],
        liveStreamingMechanism: [{ required: true, message: '请输入直播机制', trigger: 'blur' }, { validator: validateSpaceAndEmoji, }],
        commission: [
            { required: true, message: '请输入佣金', trigger: 'blur' },
            { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的佣金:整数或者保留两位小数' }
        ],
        discountPrice: [{ required: true, message: '请选择是否破价', trigger: 'change' }]
    }
)



// 新增编辑筛选事件
const handleHandleChange = (val: [string, string, string, string]) => {
    if (val) {
        categorysRef.value.togglePopperVisible()
        form.value.category = val[val.length - 1]
        form.value.firstCategory = val[0]
        form.value.secondCategory = val[1]
        form.value.thirdCategory = val[2]
        form.value.fourthCategory = val[3]
    }
}


// 类目请求方法封装
const ategoryQuest = (pid: string | number, level: number, resolve: (data: any) => void) => {
    getproductscategorychildlistbypid({ pid: pid }).then(res => {
        const datas = res.rows.map((value: { categoryId: string, categoryName: string }) => ({
            value: value.categoryId,
            label: value.categoryName,
            // leaf: level >= 3
        }));
        resolve(datas);
    })
}

// 类目props
const categoryProps = reactive({
    lazy: true,
    checkStrictly: true,
    lazyLoad(node: any, resolve: (data: any) => void) {
        const { level } = node
        const pid = !level ? 0 : node.value
        ategoryQuest(pid, level, resolve)
    }
})

/**
 * 获取品牌信息
 */
const getListBrand = async () => {
    const res = await listBrand()
    brandList.value = res.rows;
}

const props = defineProps({
    commoditymodifyData: {
        type: Object,
        default: ''
    },
    commoditymodifyVisible: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: false
    }
});
const show = computed(() => props.commoditymodifyVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}
watch(() => props.commoditymodifyVisible, (val) => {
    Object.assign(form.value, props.commoditymodifyData)
    console.log(form.value)
})
/** 提交按钮 */
const submitForm = async () => {
    buttonLoading.value = true;
    delete form.value.recruiter
    await updateSupplierAddProducts(form.value).finally(() => (buttonLoading.value = false));
    proxy?.$modal.msgSuccess('修改成功')
    handleClose()

};
onMounted(() => {
    getListBrand();
})

</script>
<style lang="scss" scoped>
.hm-box-title {
    font-size: 21px;
    font-weight: bold;
    color: #1a1b1c;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
}

.hm-form-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1b1c;
}

.hm-form-title {
    margin-bottom: 10px;
}

.hm-row3 {
    .el-form-item {
        // width: calc(100% - 80px);
        width: 100%;
        margin-right: 0px !important;
    }

    :deep(.el-date-editor--datetime) {
        width: 100% !important;

        .el-input__wrapper {
            width: 100%;
        }
    }

    .el-select {
        width: 100% !important;
    }
}

.mb96 {
    margin-bottom: 96px;
}

.collapse-enter-active,
.collapse-leave-active {
    transition: height 0.3s ease;
    overflow: hidden;
}

.collapse-enter,
.collapse-leave-to

/* .collapse-leave-active for <2.1.8 */
    {
    height: 0;
}

.collapse-content {
    background-color: #f0f0f0;
    padding: 10px;
    margin-top: 10px;
}
</style>